import Table from '@/components/table/index'
import { menuConfigMocks } from '@/mock'
import { memo, useEffect, useState } from 'react'
import { Spin, Input, Dropdown, Form, Select } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import './index.scss'

const { getAccountList } = menuConfigMocks()

type ColItems = {
  title: string
  dataIndex: string
  width?: number
  align?: 'center' | 'left' | 'right'
  ellipsis?: { showTitle: boolean }
  render?: (key: string) => JSX.Element
}

type DataItem = {
  key: number
  id: number
  username: string
  paltName: string
  name: string
  mobile: string
  status: string
  company: string
  type: string
  source: string
  remark: string
}

type Results = {
  status: number
  data: DataItem[]
}

type getTableDataFunc = (pageIndex: number, pageSize: number) => Promise<DataItem[]>

// console.warn('MenuConfig')

function MenuConfig() {
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  const [form] = Form.useForm()

  const tableHeaders: ColItems[] = [
    {
      title: '序号',
      dataIndex: 'id',
      width: 40
    },
    {
      title: '登录账号',
      dataIndex: 'username'
    },
    {
      title: '平台名称',
      dataIndex: 'paltName'
    },
    {
      title: '人员姓名',
      dataIndex: 'name'
    },
    {
      title: '手机号',
      dataIndex: 'mobile'
    },
    {
      title: '账号状态',
      dataIndex: 'status'
    },
    {
      title: '所属单位',
      dataIndex: 'company'
    },
    {
      title: '人员类型',
      dataIndex: 'type'
    },
    {
      title: '来源',
      dataIndex: 'source'
    },
    {
      title: '备注',
      dataIndex: 'remark'
    }
  ]

  const getTableData: getTableDataFunc = async (pageIndex, pageSize) => {
    const param = { ...form.getFieldsValue(), pageIndex, pageSize }
    setLoading(true)
    const data = await getAccountList<Results>(param)
    setLoading(false)
    if (data.status) {
      setTotal(data.data.length)
      return data.data.slice(pageIndex, pageIndex + pageSize)
    } else {
      return []
    }
  }

  const reset = () => {
    form.resetFields()
  }

  const search = () => {
    getTableData(1, 10)
  }

  const items = [
    {
      label: '重置',
      key: '1'
    }
  ]

  const menuProps = {
    items,
    onClick: reset
  }

  // console.warn('MenuConfig222')

  return (
    <div className="mtable">
      <Spin spinning={loading}>
        <Form form={form} className="mserach">
          <Form.Item label="登录账号" name="username" className="form-item">
            <Input allowClear placeholder="请输入" />
          </Form.Item>
          <Form.Item label="手机号" name="mobile" className="form-item">
            <Input placeholder="请输入" allowClear />
          </Form.Item>
          <Form.Item initialValue="1" label="账号状态" name="status" className="form-item">
            <Select
              style={{ width: 120 }}
              options={[
                { value: '1', label: '正常' },
                { value: '2', label: '停用' }
              ]}
            />
          </Form.Item>

          <Dropdown.Button style={{ width: 'unset' }} type="primary" icon={<DownOutlined />} menu={menuProps} onClick={search}>
            查询
          </Dropdown.Button>
        </Form>

        <div className="mtable-con">
          <Table<DataItem> tableHeaders={tableHeaders} getTableData={getTableData} total={total}></Table>
        </div>
      </Spin>
    </div>
  )
}

const MemoMenuConfig = memo(MenuConfig)

export default MemoMenuConfig
